<template>
  <div id="pagination">
    <el-row>
      <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
      </div>
    </el-row>
    <hr>
    <el-row>
      <div class="block">
        <span class="demonstration">大于七页时的效果</span>
        <el-pagination layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </el-row>
    <hr>
    <el-row>
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </el-row>
    <hr>
    <el-row>
      <el-pagination small layout="prev, pager, next" :total="50"></el-pagination>
    </el-row>
    <hr>
    <el-row>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      curentPage4: 4
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页：${val}`)
    }
  }
}
</script>
